<template>
  <view class="content">
    <view class="player-content">
      <!-- #ifdef MP-WEIXIN -->
      <live-player id="livePlayer" class="live-player" catchtouchmove  :src="sourceUrl" autoplay
                   background-mute sound-mode="speaker" mode='RTC' @statechange="statechange" @click="handleControlbar" @error="playerError">
        <view class="player-tool" :style="{bottom:(showControlbar?'0':'-60rpx')}">
          <view class="tools">
            <view class="full-screen" @tap.stop="handleFullScreen()">
              <text class="iconfont" v-if="!fullScreenFlag">&#xe824;</text>
              <text class="iconfont" v-else>&#xe67e;</text>
            </view>
            <view class="cruise" @tap.stop="handleCruise()" v-if="streamIndex == 2">
              <text class="iconfont">&#xe625;</text>
            </view>
          </view>
        </view>
      </live-player>
      <!-- #endif -->
    </view>
  </view>
</template>

<script>
export default {
	name:"xb-live",
  data() {
    return {
      isPlaySource: false, //是否有播放源
      isVideoLive: false, //是否是直播
      isAutoplay: true, //是否自动播放
      videoMsg: '', //video消息
      sourceUrl: 'rtmp://58.200.131.2:1935/livetv/cctv1', //播放路径
      showControlbar: true,
      timer:null,
    }
  },
  watch: {
    showControlbar(val, oldVal) {
      if(val){
        this.timer = setTimeout(()=>{
          this.showControlbar = false
        },5000)
      }else{
        clearTimeout(this.timer);
      }
    }
  },
  created() {
    // #ifdef  MP-WEIXIN
    // this.getLiveList()  //视频流列表
    // this.sourceUrl="rtmp://58.200.131.2:1935/livetv/cctv2"

    // #ifdef MP-WEIXIN
    this.playerCtx = uni.createLivePlayerContext('livePlayer');
    this.sourceUrl="rtmp://58.200.131.2:1935/livetv/cqtv"
    this.playerCtx.play()
    console.log("this.playerCtx",this.playerCtx)
    // #endif

    //自定义控制栏自动隐藏的实现
    setTimeout(()=>{
      this.showControlbar = false
    },10000)
    // #endif
  },

  methods: {
    playerError(e){
      console.log("playerError",e)
    },
    handleControlbar() {
      this.showControlbar = !this.showControlbar
    },
    getLiveList() {
      this.$api.livePage.getLiveList().then(res => {
        //业务逻辑
      }).catch(err => {
        console.log('err');
      });
    },
    // 巡航
    handleCruise() {
      // #ifdef  MP-WEIXIN
      uni.vibrateShort();
      // #endif
    },
    statechange(){

    },
    //全屏功能的实现
    handleFullScreen() {
      var that = this
      if (!that.fullScreenFlag) {
        //全屏
        that.playerCtx.requestFullScreen({
          success: res => {
            that.fullScreenFlag = true
            console.log('我要执行了');
          },
          fail: res => {
            console.log('fullscreen fail');
          },
          direction: 90
        });
      } else {
        //缩小
        that.playerCtx.exitFullScreen({
          success: res => {
            that.fullScreenFlag = false
            console.log('我要执行了');
          },
          fail: res => {
            console.log('exit fullscreen success');
          }
        });
      }
    },
  }
}
</script>


<style lang="scss" scoped>
.content {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  .player-content {
    position: relative;
    width: 100%;
    height: 450rpx;
    display: flex;
    background-size: 100% 100%;

    .live-player {
      width: 100%;
      height: 100%;
      position: relative;
    }
  }
}
//播放器弹出工具
.player-tool {
  width: 100%;
  height: 60rpx;
  background-image: linear-gradient(0deg, rgba(0, 0, 0, .6), transparent);
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: absolute;
  left: 0;
  padding: 0 45rpx;
  transition: all 0.3s;
  .tools {
    height: 100%;
    width: auto;
    display: flex;
    align-items: center;

    .full-screen {
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;

      .iconfont {
        color: #fff;
        font-weight: bold;

      }
    }

    .cruise {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-left: 25rpx;

      .iconfont {
        color: #E45A3E;
        font-size: 45rpx;
      }
    }
  }

}
</style>

